Angular Material এর MatToolbar এবং MatSidenav কম্পোনেন্ট দুটি জনপ্রিয় ইউআই উপাদান, যা সাধারণত ন্যাভিগেশন এবং অ্যাপ্লিকেশনের মূল কন্টেন্টকে ডিসপ্লে করার জন্য ব্যবহার করা হয়। MatToolbar হল একটি টুলবার, যা অ্যাপ্লিকেশনের শীর্ষে থাকে, এবং MatSidenav হল একটি সাইডবার, যা সাধারণত ন্যাভিগেশন মেনু হিসেবে ব্যবহৃত হয়। এই দুটি কম্পোনেন্ট একসাথে ব্যবহার করে একটি শক্তিশালী ন্যাভিগেশন সিস্টেম তৈরি করা যায়।

এখানে MatToolbar এবং MatSidenav একসাথে কিভাবে ব্যবহার করা যায়, তার একটি উদাহরণ দেওয়া হল।

১. app.module.ts ফাইলে প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatToolbarModule এবং MatSidenavModule ইমপোর্ট করতে হবে:

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,  // For list in sidenav
  ],
})
export class AppModule {}

২. HTML কোডে MatToolbar এবং MatSidenav ব্যবহার করা

এখানে একটি উদাহরণ দেওয়া হল যেখানে MatToolbar এবং MatSidenav একসাথে ব্যবহৃত হচ্ছে:

<mat-sidenav-container class="example-container">
  <!-- Sidenav -->
  <mat-sidenav #sidenav mode="side" opened>
    <mat-nav-list>
      <mat-list-item>Home</mat-list-item>
      <mat-list-item>About</mat-list-item>
      <mat-list-item>Services</mat-list-item>
      <mat-list-item>Contact</mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <!-- Main content -->
  <mat-sidenav-content>
    <!-- Toolbar -->
    <mat-toolbar color="primary">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>My Application</span>
    </mat-toolbar>

    <div class="content">
      <h1>Welcome to My Application</h1>
      <p>This is the main content area.</p>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

ব্যাখ্যা:

• MatSidenavContainer: এটি সাইডন্যাভ এবং মূল কন্টেন্টের কনটেইনার।
• MatSidenav: এটি সাইডবার, যেখানে আপনি ন্যাভিগেশন লিঙ্ক যোগ করতে পারেন। এটি #sidenav এর মাধ্যমে টেমপ্লেটে রেফারেন্স করা হয়েছে, যাতে সাইডবারটি টগল করা যায়।
• MatSidenavContent: এটি মূল কন্টেন্ট অংশ, যেখানে টুলবার এবং অন্যান্য কন্টেন্ট দেখা যাবে।
• MatToolbar: এটি শীর্ষে একটি টুলবার তৈরি করে, যেখানে অ্যাপ্লিকেশন নাম এবং একটি মেনু বাটন থাকে।
• MatIconButton: এটি একটি আইকন বাটন, যা সাইডন্যাভ খুলতে বা বন্ধ করতে ব্যবহার হয়।

৩. CSS স্টাইলিং

এটি আপনার অ্যাপ্লিকেশনের লেআউটকে সুন্দরভাবে সাজানোর জন্য কিছু স্টাইল যোগ করতে পারে:

.example-container {
  height: 100%;
}

mat-sidenav {
  width: 250px;
}

.content {
  padding: 20px;
}

ব্যাখ্যা:

• example-container: এই ক্লাসটি MatSidenavContainer এর জন্য ব্যবহার করা হয়েছে এবং এটি পুরো পৃষ্ঠাটি জুড়ে নেওয়ার জন্য উচ্চতা সেট করা হয়েছে।
• mat-sidenav: সাইডবারটির প্রস্থ ২৫০px হিসেবে নির্ধারণ করা হয়েছে।
• content: মূল কন্টেন্টের জন্য কিছু প্যাডিং যোগ করা হয়েছে যাতে এটি আরও সুন্দরভাবে প্রদর্শিত হয়।

৪. ডাইনামিক সাইডন্যাভ টগল করা

আমরা সাইডন্যাভ টগল করতে (click) ইভেন্ট ব্যবহার করতে পারি। ব্যবহারকারীরা যখন মেনু বাটনে ক্লিক করবেন, তখন সাইডন্যাভটি খুলে যাবে অথবা বন্ধ হয়ে যাবে।

export class AppComponent {
  // MatSidenav instance for toggle
  sidenav: MatSidenav;

  toggleSidenav() {
    this.sidenav.toggle();
  }
}

এটি আপনি MatSidenav এর টগল বাটনে click ইভেন্ট হ্যান্ডল করার জন্য ব্যবহার করতে পারেন।

MatToolbar এবং MatSidenav একসাথে ব্যবহার করার মাধ্যমে আপনি একটি শক্তিশালী এবং রেসপন্সিভ ন্যাভিগেশন সিস্টেম তৈরি করতে পারেন। টুলবারে মেনু বাটন ব্যবহার করে আপনি সহজেই সাইডন্যাভ টগল করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে। Angular Material এর এই কম্পোনেন্টগুলো ব্যবহার করে আপনি দ্রুত একটি আধুনিক এবং কার্যকরী ন্যাভিগেশন সিস্টেম তৈরি করতে পারেন।